<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title></title>
    <link rel="stylesheet" th:href="@{/layui/css/layui.css}">
    <link rel="stylesheet" th:href="@{/font-awesome/css/font-awesome.min.css}"/>
    <link rel="stylesheet" th:href="@{/css/scroll.css}">
    <style>
        .center {
            text-align: center;
        }
    </style>
</head>
<body>

<div class="layui-fluid">
    <nav style="margin: 10px 0; padding-bottom:5px;border-bottom: 1px dashed darkgray;">
    <span class="layui-breadcrumb">
        <a th:href="@{/admin/home}">首页</a>
        <a>系统管理</a>
        <a>
            <cite>用户管理</cite>
        </a>
    </span>
    </nav>

    <div class="layui-row">
        <div class="layui-col-md8" style="margin-bottom: 15px;">
            <button type="button" class="layui-btn layui-btn-sm" onclick="add()">
                <i class="layui-icon">&#xe654;</i>
                Add
            </button>
            <a th:href="@{/admin/sys/user/export}" type="button" class="layui-btn layui-btn-sm layui-btn-warm">
                <i class="layui-icon">&#xe63c;</i>
                Export
            </a>
            <button type="button" class="layui-btn layui-btn-sm layui-btn-normal" onclick="page(-1)">
                <i class="layui-icon">&#xe65a;</i>
                Prev
            </button>
            <button type="button" class="layui-btn layui-btn-sm layui-btn-normal" onclick="page(1)">
                <i class="layui-icon">&#xe65b;</i>
                Next
            </button>
        </div>

        <div class="layui-col-md4">
           <!-- <form class="layui-form layui-form-pane" action="">
                <div class="layui-form-item">
                    <label class="layui-form-label">
                        <i class="fa fa-search" aria-hidden="true"></i>
                        搜索
                    </label>
                    <div class="layui-input-block">
                        <input type="text" name="title" required lay-verify="required" placeholder="请输入关键字"
                               autocomplete="off" class="layui-input">
                    </div>
                </div>
            </form>-->
        </div>
    </div>
    <div class="layui-row">
        <p style="text-align: left;color: darkgray;">共检索到数据
            <span style="color: red;" th:text="${total}"></span>
            条,当前第
            <span style="color: red;" th:text="${current}"></span> 页 ,
            每页显示
            <select name="pageSize">
                <option th:selected="${pageSize==5}" value="5">5</option>
                <option th:selected="${pageSize==10}" value="10">10</option>
                <option th:selected="${pageSize==50}" value="50">50</option>
                <option th:selected="${pageSize==100}" value="100">100</option>
                <option th:selected="${pageSize} == ${total}" th:value="${total}">全部</option>
            </select>
            条 。
        </p>
    </div>
    <div>
        <table class="layui-table layui-table-page my-table">
            <thead>
            <tr>
                <th>ID</th>
                <th>NAME</th>
                <th>GENDER</th>
                <th>QQ</th>
                <th>BIRTHDAY</th>
                <th>CREATED</th>
                <th>STATE</th>
                <th>OPERATION</th>

            </tr>
            </thead>
            <tbody>
            <tr th:each="user,userStat : ${userList}">
                <td class="center" th:text="${userStat.count}"></td>
                <td th:text="${user.username}"></td>
                <td class="center" th:if="${user.sex}=='男'" style="color: #6fa5ff;">
                    男
                    <i class="fa fa-mars" aria-hidden="true"></i>
                </td>
                <td class="center" th:if="${user.sex}=='女'" style="color: #ffb6c0;">
                    女
                    <i class="fa fa-mars-stroke" aria-hidden="true"></i>
                </td>
                <td class="center" th:if="${user.sex}==null" style="color: #ffb6c0;">
                    未知
                </td>
                <td th:text="${user.email}"></td>
                <td th:if="${user.birthday}==null">
                    未知
                </td>
                <td th:if="${user.sex}!=null" th:text="${#dates.format(user.birthday, 'yyyy年MM月dd日')}">
                </td>
                <td th:text="${#dates.format(user.created, 'yyyy年MM月dd日')}"></td>
                <td class="center" th:if="${user.state} == 0" style="color: red;">停用</td>
                <td class="center" th:if="${user.state} == 1" style="color: green">用户</td>
                <td class="center" th:if="${user.state} == 2" style="color: deepskyblue">管理</td>
                <td class="center" style="width: 350px;">
                    <div class="">
                        <a title="编辑" class="layui-btn layui-btn-sm layui-btn-green"
                           href="javascript:;"
                           th:onclick="edit([[${user.id}]])">
                            <i class="fa fa-pencil" aria-hidden="true"></i>
                            edit
                        </a>
                        <a title="私信" class="layui-btn layui-btn-sm layui-btn-normal"
                           href="javascript:;"
                           th:onclick="sendEmail([[${user.id}]])">
                            <i class="fa fa-envelope-o" aria-hidden="true"></i>
                            letter
                        </a>
                        <a class="layui-btn layui-btn-sm layui-btn-warm"
                           title="修改密码"
                           href="javascript:;"
                           th:onclick="resetPassword([[${user.id}]])">
                            <i class="fa fa-lock" aria-hidden="true"></i>
                            password
                        </a>
                        <a title="删除" class="layui-btn layui-btn-sm layui-btn-danger"
                           href="javascript:;"
                           th:onclick="del([[${user.id}]])">
                            <i class="fa fa-trash" aria-hidden="true"></i>
                            delete
                        </a>
                    </div>
                </td>
            </tr>
            </tbody>
        </table>
    </div>
    <div class="layui-row" style="margin: 15px 0;">
        <div class="layui-col-md12">
            <div class="layui-btn-group" style="text-align: right;float: right;">
                <button type="button" class="layui-btn layui-btn-sm layui-btn-normal" onclick="page(-1)">
                    <i class="layui-icon">&#xe65a;</i>
                    Prev
                </button>
                <button type="button" class="layui-btn layui-btn-sm layui-btn-normal" onclick="page(1)">
                    <i class="layui-icon">&#xe65b;</i>
                    Next
                </button>
            </div>
        </div>
    </div>
</div>

<script th:src="@{/js/jquery-3.4.1.js}"></script>
<script th:src="@{/layui/layui.js}"></script>
<script th:src="@{/layui/lay/modules/element.js}"></script>
<script th:src="@{/layui/lay/modules/layer.js}"></script>
<script th:src="@{/layui/lay/modules/form.js}"></script>

<script th:inline="javascript">
    function page(d) {
        var currentPage = 0;
        if (d === -1) {
            currentPage = [[${current}]] - 1;
            if (currentPage == 0) {
                layer.msg("已经是第一页了", {icon: 5})
                return false;
            }
        } else {
            if ([[${hasNext}]]) {
                currentPage = [[${current}]] + 1;
            } else {
                layer.msg("已经是第最后一页了", {icon: 5})
                return false
            }
        }
        location.href = "user?currentPage=" + currentPage + "&pageSize=" + [[${pageSize}]];
    }

    function add() {
        layer.open({
            type: 2,
            title: '添加用户',
            shadeClose: true,
            shade: false,
            maxmin: true, //开启最大化最小化按钮
            area: ['893px', '600px'],
            content: './user_add',
            end: function () {
                location.reload();
            }
        });
    }

    function edit(id) {
        layer.open({
            type: 2,
            title: '编辑用户',
            shadeClose: true,
            shade: false,
            maxmin: true, //开启最大化最小化按钮
            area: ['893px', '600px'],
            content: './user_edit/' + id,
            end: function () {
                location.reload();
            }
        });
    }

    function sendEmail(id) {
        layer.open({
            type: 2,
            title: '私信',
            shadeClose: true,
            shade: false,
            maxmin: true, //开启最大化最小化按钮
            area: ['893px', '500px'],
            content: './user_email/' + id,
        });
    }

    function resetPassword(id) {
        layer.prompt({title: '请输入新密码，并确认', formType: 1}, function (pass, index) {
            layer.close(index);
            //admin/sys/user/resetPsw
            $.post("user/resetPsw", {
                id: id,
                password: pass
            }, function (resp) {
                if (resp.code == 0) {
                    layer.msg("修改成功")
                } else {
                    layer.msg("修改失败")
                }
            })
        });
    }

    function del(id) {
        layer.confirm('你确定要删除该用户吗？', {
            btn: ['确认', '取消'] //按钮
        }, function () {
            $.post("user_del/" + id, {}, function (resp) {
                if (resp.code == 0) {
                    layer.msg("删除成功", {icon: 1})
                    setTimeout(function () {
                        location.reload()
                    }, 3000)
                } else {
                    layer.msg("删除失败", {icon: 2})
                }
            })
        }, function () {
            layer.msg('取消', {icon: 5});
        });
    }

    $(function () {
        $("[name=pageSize]").change(function (e) {
            console.log(e.target.value)
            //location.href = "user?currentPage=" + [[${current}]] + "&pageSize=" + e.target.value;
            location.href = "user?currentPage=1&pageSize=" + e.target.value;
        })
    })
</script>
</body>
</html>